<script setup>
import { ref } from "vue";
import _api from "@/common/api/user";
import jsPDF from 'jspdf';
import * as XLSX from "xlsx";
// 防止导出pdf乱码
import '@/common/js/dengb-normal'
import 'jspdf-autotable';

const emit = defineEmits(["searched"]);

const total = ref(100);
const form = ref(null);
const loading = ref(false);
const condition = ref({
  pageIndex: 1,
  pageSize: 10,
});
const getItems = async () => {
  try {
    const result = await _api.getAsyncList(condition.value);
    emit("searched", result.data);
  } catch (error) { }
};
const reset = () => {
  condition.value = {
    pageIndex: 1,
    pageSize: 10,
    username: '',
  };
  getItems();
};

// 导出pdf
const exportToPDF = async () => {
  try {
    loading.value = true;
    const { dataKeys, dataValues, dataExcel } = await getInfo();
    const doc = new jsPDF('p', 'mm', 'a2');
    // 添加表格到PDF
    doc.autoTable({
      head: [dataKeys],
      body: dataValues,
      theme: 'grid',
      // margin: { top: 40 },
      styles: {
        fontSize: 8,
        font: 'dengb',
        // cellPadding: 5
      },
      columnStyles: {
        0: { cellWidth: 20 },
        1: { cellWidth: 30 },
        2: { cellWidth: 30 },
        3: { cellWidth: 30 },
        4: { cellWidth: 30 },
        // 固定宽度
      },
    });
    // 输出PDF文件
    doc.save(`用户.pdf`);
  } catch (error) { }
  loading.value = false
};


// 获取excel和pdf数据
const getInfo = async () => {
  const result = await _api.getAsyncList({
    pageIndex: 1,
    pageSize: 10
  });
  const items = result.data;
  const dataKeys = ["id", "username", "password", "nickname", "email"]
  const dataValue = items.map(m => {
    return {
      id: m.id,
      username: m.username,
      password: m.password,
      nickname: m.nickname,
      email: m.email
    }
  })
  const dataValues = dataValue.map(item => Object.values(item))
  // 将dataKeys和dataValues组合成一个二维数组
  const dataExcel = [dataKeys, ...dataValues];
  return {
    dataKeys: dataKeys,
    dataValues: dataValues,
    dataExcel: dataExcel
  }
}

// 导出excel
const exportToExcel = async () => {
  try {
    loading.value = true
    const { dataKeys, dataValues, dataExcel } = await getInfo();
    const workbook = XLSX.utils.book_new();

    const worksheet = XLSX.utils.aoa_to_sheet(dataExcel);

    // 将工作表添加到工作簿中
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

    // 将工作簿导出为 Excel 文件
    XLSX.writeFile(workbook, `用户.xlsx`);
  } catch (error) { }
  loading.value = false
}

// 导入excel
const importExcel = () => {
  console.log('111');
};


getItems();

defineExpose({
  getItems,
});
</script>

<template>
  <section class="search">
    <div class="top">
      <el-form :model="condition" ref="form" label-width="auto">
        <el-form-item>
          <el-input v-model="condition.username" placeholder="请输入用户名称" clearable />
        </el-form-item>
        <el-button @click="getItems" type="primary">搜 索</el-button>
        <el-button @click="reset" type="primary">重 置</el-button>
        <el-button @click="exportToPDF" type="primary" :loading="loading">导 出 Pdf</el-button>
        <el-button @click="exportToExcel" type="primary" :loading="loading">导 出 Excel</el-button>
        <el-button @click="importExcel" type="primary" :loading="loading">导 入 Excel</el-button>
        <slot name="action-bar-action"></slot>
      </el-form>
    </div>
    <div class="main">
      <slot></slot>
    </div>
    <div class="bottom">
      <el-pagination v-model:current-page="condition.pageIndex" v-model:page-size="condition.pageSize"
        :page-sizes="[5, 8, 10, 20, 30, 40, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper,"
        :total="total" @size-change="getItems" @current-change="getItems">
        <template #default="total">
          <span>共{{ total }}</span>
        </template>
        <!-- <span>共{{ total }}</span> -->
      </el-pagination>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: calc(100% - 50px);

  .top {
    .el-form {
      max-width: 100vw;
      display: flex;

      .el-form-item {
        margin-right: 10px;
        max-width: 300px;
      }
    }
  }

  .main {
    height: calc(100% - 50px);
  }

  .bottom {
    height: 50px;
    display: flex;
    align-items: flex-end;
  }

}
</style>